<template>
  <page-layout :avatar="currUser.avatar">
    <div slot="headerContent">
      <div class="title">{{ welcome.timeFix[lang] }}，{{ currUser.username }}，{{ welcome.message[lang] }}</div>
      <!--      <div>{{ currUser.position[lang] }}</div>-->
      <div>北京市朝阳区</div>
    </div>
    <template slot="extra">
      <head-info class="split-right" title="工作空间成员" :content="headInfo.workspaceMemberNumber"/>
      <head-info class="split-right" title="已发布规则" :content="headInfo.publishedGeneralRuleNumber"/>
      <head-info class="split-right" title="已发布规则集" :content="headInfo.publishedRuleSetNumber"/>
    </template>
    <template>
      <a-row style="margin: 0 -12px">
        <!--        <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">-->
        <a-col>
<!--          <a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false"-->
<!--                  :title="$t('progress')" :body-style="{padding: 0}">-->
<!--            &lt;!&ndash;            <a slot="extra">{{ $t('all') }}</a>&ndash;&gt;-->
<!--            <div>-->
<!--              <a-card-grid :key="i" v-for="(item, i) in projects">-->
<!--                <a-card :bordered="false" :body-style="{padding: 0}">-->
<!--                  <a-card-meta :description="item.description?item.description:'暂无任何描述'">-->
<!--                    <div slot="title" class="card-title">-->
<!--                      <a-avatar-->
<!--                          v-if="item.dataType===0"-->
<!--                          shape="square"-->
<!--                          size="small"-->
<!--                          :style="{ backgroundColor: '#f56a00', verticalAlign: 'middle' }"-->
<!--                      >-->
<!--                        G-->
<!--                      </a-avatar>-->
<!--                      <a-avatar-->
<!--                          v-if="item.dataType===1"-->
<!--                          shape="square"-->
<!--                          size="small"-->
<!--                          :style="{ backgroundColor: '#7265e6', verticalAlign: 'middle' }"-->
<!--                      >-->
<!--                        R-->
<!--                      </a-avatar>-->
<!--                      &nbsp;-->
<!--                      <span>{{ item.name }}({{ item.code }})</span>-->
<!--                    </div>-->
<!--                  </a-card-meta>-->
<!--                  <div class="project-item">-->
<!--                    <a class="group" href="/#/">{{ item.createUsername }}</a>-->
<!--                    <span class="datetime">{{ showtime(item.updateTime) }}</span>-->
<!--                  </div>-->
<!--                </a-card>-->
<!--              </a-card-grid>-->
<!--            </div>-->
<!--          </a-card>-->

          <a-card :loading="loading" :title="$t('dynamic')" :bordered="false">
            <a slot="extra"> 查看更多 </a>
            <a-list>
              <a-list-item :key="index" v-for="(item, index) in activities">
                <a-list-item-meta>
                  <a-avatar slot="avatar" icon="user" :src="item.userAvatar"/>
                  <div slot="title" v-html="item.description"/>
                  <div slot="description">{{ showtime(item.operationTime) }}</div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>

        </a-col>
        <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24" v-if="false">
          <!--          <a-card :title="$t('access')" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">-->
          <!--            <div class="item-group">-->
          <!--              <a>操作一</a>-->
          <!--              <a>操作二</a>-->
          <!--              <a>操作三</a>-->
          <!--              <a>操作四</a>-->
          <!--              <a>操作五</a>-->
          <!--              <a>操作六</a>-->
          <!--              <a-button size="small" type="primary" ghost icon="plus">{{ $t('add') }}</a-button>-->
          <!--            </div>-->
          <!--          </a-card>-->

<!--          <a-card :loading="loading" title="创作数量排名" style="margin-bottom: 24px" :bordered="false"-->
<!--                  :body-style="{padding: 0}">-->
<!--            <div style="min-height: 400px;">-->
<!--              <radar/>-->
<!--            </div>-->
<!--          </a-card>-->

          <!--          <a-card :loading="loading" :title="$t('team')" :bordered="false">-->
          <!--            <div class="members">-->
          <!--              <a-row>-->
          <!--                <a-col :span="12" v-for="(item, index) in teams" :key="index">-->
          <!--                  <a>-->
          <!--                    <a-avatar size="small" :src="item.avatar"/>-->
          <!--                    <span class="member">{{ item.name }}</span>-->
          <!--                  </a>-->
          <!--                </a-col>-->
          <!--              </a-row>-->
          <!--            </div>-->
          <!--          </a-card>-->
        </a-col>
      </a-row>
    </template>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import HeadInfo from '@/components/tool/HeadInfo'
//import Radar from '@/pages/dashboard/workplace/Radar'
import {mapState} from 'vuex'
import {request, METHOD} from '@/utils/request'
import {showtime} from '@/utils/dateUtil'
import {headInfo} from "@/services/workplace";
import {operationRecordList} from "@/services/operationRecord";


export default {
  name: 'WorkPlace',
  components: {HeadInfo, PageLayout},
  i18n: require('./i18n'),
  data() {
    return {
      projects: [],
      loading: true,
      activities: [],
      teams: [],
      headInfo: {
        workspaceMemberNumber: 0,
        publishedGeneralRuleNumber: 0,
        publishedRuleSetNumber: 0,
      },
      welcome: {
        timeFix: '',
        message: ''
      }
    }
  },
  methods: {
    showtime(time) {
      return showtime(time);
    }
  },
  computed: {
    ...mapState('user', {currUser: 'user'}),
    ...mapState('setting', ['lang'])
  },
  created() {
    request('/user/welcome', METHOD.GET).then(res => {
      this.welcome = res.data
    })
    //动态
    operationRecordList({
      page: {
        pageSize: 10,
        pageIndex: 1
      },
      query: {},
      orders: []
    }).then(res => {
      const resp = res.data;
      if (resp.data) {
        this.activities = resp.data.rows
      } else {
        this.activities = []
      }
    })
    //团队
    // request('/work/team', METHOD.GET).then(res => {
    //   this.teams = res.data
    //   //console.log(res.data)
    // })
    headInfo().then(res => {
      this.headInfo = res.data.data;
      this.loading = false
    })
    //进行中的项目
    // projectInProgress().then(res => {
    //   this.projects = res.data.data
    //   this.loading = false
    // })
  }
}
</script>

<style lang="less">
@import "index";
</style>
